<template>
		<view class="tabbar-container" style="z-index: 20;">
			<block>
				<!-- 通过centerItem:true 来给凸起的添加样式 -->
				<view class="tabbar-item" v-for="(item,index) in tabbarList" :class="[item.centerItem?'center-item':'']" @click="changeItem(item)" :key="index">
					<view class="item-top">
						<!-- <image :src="currentItem==item.id?item.selectIcon:item.icon" mode="scaleToFill"></image> -->
						<icon class="iconfont" :class="currentItem==item.id?item.selectIcon:item.icon" mode="scaleToFill"></icon>
					</view>
					<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
						<text>{{item.text}}</text>
					</view>
				</view>
			</block>
		</view>
</template>

<script>
	export default{
		props:{
			currentPage:{
				type:Number,
				default:0
			}
		},
		data(){
			return{
				currentItem:0,
				tabbarList:[
					{
						id:0,
						path:"/pages/index/index",
						text:"首页",
						icon:"icon-shouye",
						selectIcon:"icon-shouye selected",
						centerItem: false
					},
					{
						id:1,   
						path:"/pages/cart/index",
						text:"购物车",
						icon:"icon-gouwuche",
						selectIcon:"icon-gouwuche selected",
						centerItem: false
					},
					{
						id:2,
						path:"/pages/fabu/index",
						text:"",
						icon:"icon-jiahao jiahao",
						selectIcon:"icon-jiahao jiahao",
						centerItem: true
					},
					{
						id:3,
						path:"/pages/xiaoxi/index",
						text:"消息",
						icon:"icon-xiaoxi",
						selectIcon:"icon-xiaoxi selected",
						centerItem: false
					},
					{
						id:4,
						path:"/pages/wode/index",
						text:"我的",
						icon:"icon-wode",
						selectIcon:"icon-wode selected",
						centerItem: false,
		
					}
				]
			}
		},
		onLoad() {
			this.currentItem = this.currentPage;
			uni.hideTabBar();//隐藏原来的tabBar导航栏
		},
		mounted(){
			this.currentItem = this.currentPage;
			uni.hideTabBar();//隐藏原来的tabBar导航栏
		},
		methods:{
			changeItem(item){
				// this.currentItem = item.id;
				uni.switchTab({  
					url:item.path
				})
				
			}	
		}
	}
</script>

<style  scoped lang="scss">
view {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.tabbar-container {
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 110rpx;
	box-shadow: 0 0 5px #999;
	display: flex;
	align-items: center;
	padding: 5rpx 0;
	color: #888888;
}
.tabbar-container .tabbar-item {
	width: 20%;
	height: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.tabbar-container .item-active {
	// color: #FF6347;
	color: $color;
}
.tabbar-container .center-item {
	display: block;
	position: relative;
	color: #FFFFFF;
}
.tabbar-container .center-item .item-active{
	color: #FFFFFF;
}
.tabbar-container .tabbar-item .item-top {
	width: 70rpx;
	height: 70rpx;
	padding: 10rpx;
}
.tabbar-container .center-item .item-top {
	flex-shrink: 0;
	width: 140rpx;
	height: 140rpx;
	position: absolute;
	top: -50rpx;
	left: calc(50% - 70rpx);
	border-radius: 50%;
	box-shadow: 0 0 5px #999;
	/* background-color: #ffffff; */
	background-color: $color;
}
.tabbar-container .tabbar-item .item-top image {
	width: 100%;
	height: 100%;
}
.tabbar-container .center-item .item-top image {
	width: 70%; 
	height: 70%;
}
.tabbar-container .tabbar-item .item-bottom {
	font-size: 28rpx;
	width: 100%;
}
.tabbar-container .center-item .item-bottom {
	position: absolute;
	bottom: 30rpx;
}
.selected{
	color: $color;
}
.jiahao{
	margin-top:27upx;
	font-size: 36px;
}
</style>
